<template>
    <footer class="footer" v-show="total > 0">
        <span class="todo-count">
            <strong v-text="remaining"></strong> {{pluralize('item', remaining)}} left
        </span>
        <ul class="filters">
            <li><router-link to="all" :class="{selected: visibility == 'all'}">All</router-link></li>
            <li><router-link to="active" :class="{selected: visibility == 'active'}">Active</router-link></li>
            <li><router-link to="completed" :class="{selected: visibility == 'completed'}">Completed</router-link></li>
        </ul>
        <button class="clear-completed" @click="onRemoveCompleted" v-show="total > remaining">
            Clear completed
        </button>
    </footer>
</template>
<script lang="ts">
export default {
    props: {
        remaining: {
            type: Number,
            required: true 
        },
        total: {
            type: Number,
            required: true
        },
        visibility: {
            type: String,
            required: true
        }
    },
    setup(props, context) {
        const pluralize = (word, count) => {
            return word + (count === 1 ? '' : 's')
        }
        const onRemoveCompleted = () => {
            context.emit('removeCompleted')
        }

        return {
            pluralize,
            onRemoveCompleted
        }  
    }
}
</script>